<template>
  <div>
    <v-chart
      class="chart"

      :option="chart"
      autoresize
    />
  </div>
</template>

<script>

// eslint-disable-next-line no-unused-vars
import * as echarts from "echarts";
// 引入vue-echarts
import VChart from "vue-echarts";
// 标准作业线
export default {
  name: "DischargeChart",
  components: { VChart },
  props: {
    height: {
      type: [String, Number],
      default() {
        return "250";
      },
    },
  },
  data() {
    return {
      diosho: false,
      iframeTitle: "",
      iframeSrc: "",
      tabledata: [],
      chart: {
        textStyle: {
          fontSize: this.$utils.transformFontSize(16),
        },
        backgroundColor: "transparent",
        tooltip: {},
        grid: {
          top: "18%",
          left: "12%",
          right: "0%",
          bottom: "15%",
        },
        legend: {
          data: ["计划", "实际"],
          textStyle: {
            color: "#999999",
            borderColor: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
              // 坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#0a3256",
              },
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置
              textStyle: {
                color: "#d1e6eb",
                margin: 15,
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#0a3256"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0a3256",
                type: "dashed",
                opacity: 0.3
              }
            },
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 1200,
            splitNumber: 6,
            name: "万吨",
            nameTextStyle: {
              color: "#d1e6eb",
              fontSize: 12,
              padding: [0, 0, 0, 30]
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0a3256",
                type: "dashed"
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0a3256"
              }
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
              formatter: function(value) {
                return value;
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#0a3256"
              }
            },
          },
        ],
        series: [
          {
            name: "计划",
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 8,
            lineStyle: {
              color: "#28ffb3", // 线条颜色
            },
            itemStyle: {
              color: "#28ffb3",
              borderColor: "#fff",
            },
            tooltip: {
              show: true,
            },
            areaStyle: {
              // 区域填充样式
              // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,154,120,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,0,0, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
              shadowBlur: 20, // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
            data: [393, 438, 485, 631, 689, 824, 987],
          },
          {
            name: "实际",
            type: "bar",
            barWidth: 20,
            tooltip: {
              show: false,
            },
            itemStyle: {
              color: "#1492FF",
            },
            data: [200, 382, 102, 267, 186, 315, 316],
          },
        ],
      },
    };
  },
  mounted() {
    // this.initData();
  },
  methods: {
    initData() {
      this.chart.tooltip.formatter = (p) => this.formatter(p, "小时");
      this.$api.summary.get_berthlvy().then((val) => {
        const obj = [
          {
            name: "9号",
            type: "line",
            data: this.mapNull(val["9hbw"], "SHICHANG"),
          },
          {
            name: "10号",
            type: "line",
            data: this.mapNull(val["10hbw"], "SHICHANG"),
          },
          {
            name: "14号",
            type: "line",
            data: this.mapNull(val["14hbw"], "SHICHANG"),
          },
        ];
        this.chart.series = obj;
      });
    },
    formatter(params, unit) {
      let relVal = params[0].name + "月";
      for (let i = 0, l = params.length; i < l; i++) {
        relVal += "<br/>" + params[i].marker;
        let v = "";
        if (params[i].value) {
          v = `${params[i].seriesName} ：${this.$utils.roundFun(
            params[i].value,
            2
          )}  ${unit}`;
        } else {
          v = "-";
        }
        relVal += v;
      }
      return relVal;
    },
    mapNull(data, filed) {
      return data.map((t) => {
        if (t[filed] === "0") {
          return "";
        }
        return t[filed];
      });
    },
  },
};
</script>

<style lang="scss"></style>
